<template>
  <div>
    <van-nav-bar
        title="每日打卡"
        left-text="返回"
        right-text="打卡记录"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <!-- 用户信息区域 -->
    <div class="check-in-record">
      <div class="user-info">
        <img :src="users.imageUrl" alt="Avatar" class="user-avatar" />
        <div class="user-nickname">{{ users.username }}</div>
      </div>
      <div class="check-in-days">累计打卡：{{ clickInUsers.nums}} 天</div>
    </div>
    <!-- 文本输入区 -->
    <div class="input-box">
      <van-field
          v-model="clickUsers.title"
          label="打卡标题"
          left-icon="smile-o"
          right-icon="warning-o"
          placeholder="起一个寓意美好的标题吧"
      />
      <van-field
          v-model="clickUsers.description"
          rows="2"
          autosize
          label="打卡内容"
          type="textarea"
          maxlength="50"
          placeholder="这一刻我想说..."
          show-word-limit
      />
      <van-button @click="onClickIn" size="normal" round>
        <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="2000"
            :touchable="false"
            :show-indicators="false"
        >
          <van-swipe-item>打卡</van-swipe-item>
          <van-swipe-item>打卡</van-swipe-item>
        </van-swipe>
      </van-button>
    </div>

    <!-- 最新打卡记录 -->
    <div class="latest-checkin">
      <div class="header">
        <span class="title">最新打卡</span>
        <span class="count">(今天已有 {{todayClickIns}} 人打卡)</span>
      </div>
    </div>
    <div class="check-in-record">
      <div class="user-info">
        <img :src="latestCheckIns.imageUrl" alt="Avatar" class="user-avatar" />
        <div class="user-nickname">{{ latestCheckIns.username }}</div>
        <van-tag color="#ffe1e1" text-color="#ad0000">{{latestCheckIns.tittle}}</van-tag>
      </div>
      <div class="description">{{latestCheckIns.content}}</div>
      <div class="check-in-days">累计打卡：{{latestCheckIns.nums}} 天</div>
    </div>

  </div>
</template>

<script setup>
import {showToast} from "vant";
import {onMounted, ref} from "vue";
import {get, post} from "../../util/request.js";
import '../../assets/styles/daily-check-in.scss'
import {useRouter} from "vue-router";

const router = useRouter();
const clickUsers = ref({
  title: '',
  description: '',
})
const users = ref([])
const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push('/clickInRecord')
}
const clickInUsers = ref([])
const todayClickIns=ref([])
onMounted(async () => {
  try {
    get("user/getUser").then(r => {
      if (r.code == 0) { // 获取成功
        // alert("查询成功")
        users.value = r.data;
      } else {
        showToast("查询失败")
        // 加载状态结束
      }
    }).catch(function () {
      alert("用户信息查询异常")
    });
  } catch (error) {
    console.error("Error fetching users:", error);
  }

  get("home/topics/getTopics").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      showToast("打卡信息查询成功")
      clickInUsers.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("打卡信息查询异常")
  })

  get("home/checkins/lastClickInRecord").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      latestCheckIns.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("最新打卡信息查询异常")
  })

  get("home/checkins/todayClickIn").then(r => {
    if (r.code == 0) { // 获取成功
      // alert("查询成功")
      todayClickIns.value = r.data;
    } else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("打卡信息查询异常")
  })




});

const latestCheckIns =ref([])

const onClickIn = () => {

  post('home/topics/clickIn', clickUsers.value).then(r => {
    if (r.code == 0) { // 获取成功
      showToast("打卡成功")
      window.location.reload();
    } else {
      showToast("打卡失败")
      // 加载状态结束
    }
  }).catch(function () {
    alert("全部异常")
  });
}
</script>

<style scoped>
.check-in-record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

.user-info {
  display: flex;
  align-items: center;
  font-style: italic;
  color: #999;
  margin-bottom: 10px;

.user-avatar {
  width: 40px; /* 调整头像大小 */
  height: 40px;
  border-radius: 50%; /* 圆形头像 */
}

.user-nickname {
  font-size: 18px;
  margin-left: 10px;
}

}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.latest-checkin {
  display: flex;
  align-items: center;
}

.header {
  margin-bottom: 5px;
}

.title {
  font-size: 14px;
  color: #909399;
}

.count {
  margin-left: 5px;
  font-size: 12px;
  color: #909399;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}

.name {
  font-size: 14px;
  color: #303133;
}

.tag-container {
  margin-top: 5px;
}

.description {
  font-size: 12px;
  color: #535bf2;
}
.check-in-days{
  font-size: 18px;
  color: #909399;
}
</style>